<template>
  <div class="app-container" v-loading="loading">
    <el-form :inline="true" :model="queryParams">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.ployName" placeholder="策略名称" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                clearable
                placeholder="状态"
                v-model="queryParams.status"
            >
              <el-option label="全部" value=""></el-option>
              <el-option label="启用" value="0"></el-option>
              <el-option label="停用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input v-model="queryParams.sort" placeholder="生效优先" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                clearable
                placeholder="拣货路线"
                v-model="queryParams.pickType"
            >
              <el-option label="全部" value=""></el-option>
              <el-option label="全仓" value="0"></el-option>
              <el-option label="自定义" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
                style="width:100%"
                v-model="timeData"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="-"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"

                unlink-panels
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>

    </el-form>
    <div>
      <el-button type="primary" @click="clickAdd" v-hasPermi="['outOrder:batchPloy:save']">新增策略</el-button>
    </div>
    <vxe-table
        border
        show-overflow
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库名称"></vxe-column>
      <vxe-column field="ployName"  min-width="220" title="策略名称"></vxe-column>
      <vxe-column field="status"  width="120" title="状态">
        <template v-slot="{row}">
          <el-tag v-if="row.status == 0">启用</el-tag>
          <el-tag v-else class="ml-2" type="danger">停用</el-tag>
        </template>
      </vxe-column>
      <vxe-column field="sort"  width="120" title="生效优先"></vxe-column>
      <vxe-column field="pickNumMin"  width="120" title="最少出库单数量"></vxe-column>
      <vxe-column field="pickNumMax"  width="120" title="最多出库单数量"></vxe-column>
      <vxe-column field="pickType"  width="200" title="拣货路线">
        <template #default="{row}">
          <span v-if="row.pickType===0">全仓</span>
          <span v-if="row.pickType===1">自定义</span>
        </template>
      </vxe-column>
      <vxe-column field="createByName"  width="150" title="创建人"></vxe-column>
      <vxe-column field="createTime"  width="200" title="创建时间"></vxe-column>
      <vxe-column fixed="right"  width="220" title="操作">
        <template #default="{row}">
          <el-button type="text" @click="clickEdit(row)">编辑</el-button>
          <el-button type="text" style="color:green" @click="clickView(row)">查看</el-button>
          <el-button type="text" v-if="row.status==1" style="color:green" @click="clickUpdateStatus(row,0)">启用 </el-button>
          <el-button type="text" v-if="row.status==0" style="color:#e6a23c" @click="clickUpdateStatus(row,1)">禁用 </el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <EditWavePickTactics v-if="isShowDialog" :isView="isView" :isShowDialog="isShowDialog" :title="title" :detailData="detailData" @cancel="handleClose"></EditWavePickTactics>
  </div>

</template>

<script setup>
import {getCurrentInstance, nextTick, onMounted, ref} from "vue";
import {batchPloyGetInfo, batchPloyGetList, updateBatchPloyStatus} from "@/api/scApi";
import EditWavePickTactics from "@/views/outStorage/wavePickTacticsManagement/component/editWavePickTactics.vue";

const { proxy } = getCurrentInstance()
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
let timeData=ref([])
let total = ref(1)
let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 330;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 330;
}
let loading=ref(false)
let tableList = ref([ ])
let title=ref("")
let isView=ref(false)
let detailData=ref({})
function getList() {
  loading.value=true
  queryParams.value.startTime=timeData.value[0]
  queryParams.value.endTime=timeData.value[1]
  let params={
    pageNum:queryParams.value.pageNum,
    pageSize:queryParams.value.pageSize,
    param:queryParams.value
  }
  batchPloyGetList(params).then(res=>{
    loading.value=false
    if(res.code===200){
      tableList.value =res.data
    }
  }).finally(()=>{
    loading.value = false
  })
}
onMounted(()=>{
  getList()
})
const resetQuery = () => {
  timeData.value=[]
  queryParams.value={
    pageNum: 1,
    pageSize: 10,
    startTime:'',
    endTime:''
  }
  getList();
};
let isShowDialog =ref(false)
function clickAdd(){
  title.value='新增策略'
  isShowDialog.value=true
}

function handleClose(isReload) {

  isShowDialog.value = false
  isView.value = false
  if (isReload) {
    getList()
  }
}

function clickEdit(row){
  title.value='编辑策略'
  getbatchPloyInfo(row.ployId)
}

function clickView(row){
  title.value='查看策略'
  isView.value=true
  getbatchPloyInfo(row.ployId)
}

function  getbatchPloyInfo(batchPloyId){
  batchPloyGetInfo({"batchPloyId":batchPloyId}).then(res=>{
    if(res.code===200){
      isShowDialog.value=true
      detailData.value =res.data
    }
  })
}

function clickUpdateStatus(row,status){
   let params={
     ployId:row.ployId,
     status:status
   }
  updateBatchPloyStatus(params).then(res=>{
    if(res.code===200){
      proxy.$modal.msgSuccess('更新成功')
      getList()
    }
  })
}
</script>

<style scoped lang="scss">
.el-form-item {
  width: 90%;
}
</style>